<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			hr,
			p,
			blockquote,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			pre,
			fieldset,
			lengend,
			button,
			input,
			textarea,
			th,
			td {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			
	
			body,
			button,
			input,
			select,
			textarea {
				font-family: "微软雅黑", sans-serif, inherit;
				font-size: 0.12rem;
			}
			
			h1 {
				font-size: 18px;
			}
			
			h2 {
				font-size: 16px;
			}
			
			h3 {
				font-size: 14px;
			}
			
			h4,
			h5,
			h6 {
				font-size: 100%;
			}
			
			address,
			cite,
			dfn,
			em,
			var {
				font-style: normal;
			}
	
			code,
			kbd,
			pre,
			samp,
			tt {
				font-family: "Courier New", Courier, monospace;
			}
		
			small {
				font-size: 12px;
			}
			
	
			ul,
			ol {
				list-style: none;
			}
			
	
			a {
				text-decoration: none;
			}
			
			a:hover {
				text-decoration: underline;
			}
			
			abbr[title],
			acronym[title] {
				border-bottom: 1px dotted;
				cursor: help;
			}
			
			q:before,
			q:after {
				content: '';
			}
	
			legend {
				color: #000;
			}
			
	
			fieldset,
			img {
				border: none;
			}
			
			button,
			input,
			select,
			textarea {
				font-size: 100%;
			}
			
			
			table {
				border-collapse: collapse;
				border-spacing: 0;
			}
			
			
			hr {
				border: none;
				height: 1px;
			}
			
			
			html {
				overflow-y: scroll;
			}
			
			
			.ellipsis {
				max-width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
	
			.clearfix {
				*zoom: 1;
			}
			
			.clearfix:before,
			.clearfix:after {
				display: table;
				line-height: 0;
				content: "";
			}
			
			.clearfix:after {
				clear: both;
			}

			@charset "utf-8";
			.tc{
				text-align: center;
			}
			.mt5{
				margin-top: 15px;
			}
			
			
			.good_title{
				height: 20px;
				overflow: hidden;
			}
			.googs_list{
				width: 80%;
				margin: 50px auto 0;
				height: 300px;
				/* box-shadow: 0px 0px 5px #999; */
			}
			
			
			.googs_list ul li{
				width: 20%;
				float: left;
				box-sizing: border-box;
				height: 300px;
				border: 1px solid #999;
			}
			.googs_list ul li:hover{
				box-shadow: 0px 0px 3px #000;
			}
			
			.googs_list ul li img{
				width:150px;
				height: 150px;
			}
			
			
			table{
				width: 80%;
				margin:100px auto 150px;
				border-collapse: collapse;
				text-align: center;
			}
			
			tr,th,td{
				border: 1px solid #999;
				padding: 5px;
			}
			tr,th{
				height: 40px;
			}
			table img{
				width: 100px;
				height: 100px;
			}
			.count{
				width: 60px;
				text-align: center;
				vertical-align: bottom;
				height: 26px;
				line-height: 26px;
			}
			.btn{
				width: 40px;
				border: none;
				cursor: pointer;
				outline: none;
				font-size: 20px;
				height: 26px;
				line-height: 26px;
			}
		</style>
	</head>
	<body>
		<div class="googs_list tc">
			<div class="tc">
				<br>
				<h2>商品列表展示</h2>
				<br>
			</div>
			<ul class="list_ul">
				<!-- <li>
					<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
					<div class="good_title mt5">
						米家电磁炉
					</div>
					<div class="price mt5">
						249元
					</div>
					<button type="button" class="btn_add mt5">
						加入购物车
					</button>
				</li>
				<li>
					<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
					<div class="good_title mt5">
						米家电磁炉
					</div>
					<div class="price mt5">
						249元
					</div>
					<button type="button" class="btn_add mt5">
						加入购物车
					</button>
				</li>
				<li>
					<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
					<div class="good_title mt5">
						米家电磁炉
					</div>
					<div class="price mt5">
						249元
					</div>
					<button type="button" class="btn_add mt5">
						加入购物车
					</button>
				</li>
				<li>
					<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
					<div class="good_title mt5">
						米家电磁炉
					</div>
					<div class="price mt5">
						249元
					</div>
					<button type="button" class="btn_add mt5">
						加入购物车
					</button>
				</li>
				<li>
					<img src="//i1.mifile.cn/a1/pms_1513822496.31335198.jpg" >
					<div class="good_title mt5">
						米家电磁炉
					</div>
					<div class="price mt5">
						249元
					</div>
					<button type="button" class="btn_add mt5">
						加入购物车
					</button>
				</li> -->
				
			</ul>
		</div>	

		<table>
			<thead>
				<tr>
					<th>全选</th>
					<th>商品</th>
					<th>数量</th>
					<th>单价</th>
					<th>小计</th>
					<th>操作</th>
					<th>时间</th>
				</tr>
			</thead>
			<tbody>
				<!-- <tr>
					<td>
						<input type="checkbox" name="" id="" value="" />
					</td>
					<td>
						<p>
							<img src="//i1.mifile.cn/a1/pms_1506417289.23728408.jpg" >
							<br>
							<span>米家压力IH电</span>
						</p>
					</td>
					<td>
						<button type="button" class="btn">-</button>
						<input type="text" name="" id="" value="" class="count"/>
						<button type="button" class="btn">+</button>
					</td>
					<td>
						<span>3000元</span>
					</td>
					<td>
						3000*2
					</td>
					<td>
						<button type="button">删除</button>
					</td>
					<td>
						2020/01/10
					</td>
					
				</tr>
				 -->
			</tbody>
			<tfoot>
				<tr>
					<td>
						<label>
							<input type="checkbox" name="check" class="quanxuan"/>
							全选按钮
						</label>
					</td>
					<td>
						<button type="button" id="delChecked">
							删除选中商品
						</button>
					</td>
					<td colspan="4"></td>
					<td>
						总价：<br>
						<div id="sum">
							
						</div>
					</td>
				</tr>
			</tfoot>
		</table>
		
		<script type="text/javascript">
			;(function(){		
				var dataObj = {
				 	"data": [{
				 		"productid": "7528",
				 		"commodityid": "1175000272",
				 		"goodsid": "2175000298",
				 		"name": "米家电磁炉",
				 		"price": "249",
				 		"market_price": "299",
				 		"image": "imgs/01.png",
				 	}, {
				 		"productid": "6825",
				 		"commodityid": "1173700017",
				 		"goodsid": "2173700027",
				 		"name": "小米USB Type C快速充电数据线",
				 		"price": "16.9",
				 		"market_price": "16.9",
				 		"image": "imgs/02.png",
				 	}, {
				 		"productid": "6271",
				 		"commodityid": "1172800022",
				 		"goodsid": "2172800014",
				 		"name": "小米随身手电筒",
				 		"price": "79",
				 		"market_price": "79",
				 		"image": "imgs/03.png",
				 	}, {
				 		"productid": "9530",
				 		"commodityid": "1191200019",
				 		"goodsid": "2191200018",
				 		"name": "米家压力IH电饭煲1S",
				 		"price": "899",
				 		"market_price": "1099",
				 		"image": "imgs/04.png",
				 	}, {
				 		"productid": "9144",
				 		"commodityid": "1185000014",
				 		"goodsid": "1185000014",
				 		"name": "空调（1.5匹/变频/一级能效）",
				 		"price": "1999",
				 		"market_price": "2699",
				 		"image": "imgs/05.png",
				 	}]
				}
				
				
			localStorage.dataObj = JSON.stringify(dataObj.data);
			
		}())
		</script>
		<script type="text/javascript">
			var arr = [];
			var cartArr = [];
			
			window.onload = function () {
				showGoodsList(getLocalGoodsListData());
				render(getLocalCartData());
			}
			
			function showGoodsList(arr) {
				var list_ul = document.querySelector(".list_ul");
				list_ul.innerHTML = "";
				for (var i = 0; i < arr.length; i++) {
					list_ul.innerHTML +=
						`
						<li data-id="${ arr[i].goodsid }">
							<img src="${ arr[i].image }" >
							<div class="good_title mt5">
								${ arr[i].name }
							</div>
							<div class="price mt5">
								${ arr[i].price }元
							</div>
							<button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
								加入购物车
							</button>
						</li>
					`;
			
				}
			
			}
			
			function addCart(goodsId, img, goodsName, price) {
				var count = 1;
				var xiaoji = price / 1 * count;
				var obj = {
					id: goodsId,
					src: img,
					title: goodsName,
					price: price,
					count: count,
					xiaoji: xiaoji.toFixed(2),
					time: new Date().toLocaleTimeString()
				}
				addData(obj);
			}
			function addData(obj) {
				cartArr = getLocalCartData();
				var result = cartArr.some(function(item,index){
					return item.id === obj.id
				})
				if(result){
					jia(obj.id);
					return;
				}
				cartArr.push(obj);
				localStorage.cartArr = JSON.stringify(cartArr);
				render(cartArr);
			
			}

			function render(cartArr) {
				var tbody = document.querySelector('tbody');
				tbody.innerHTML = "";
				var str = "";
				var sum = 0;
				for (var i = 0; i < cartArr.length; i++) {
					str += `
						
							<tr>
								<td>
									<input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
								</td>
								<td>
									<p>
										<img src="${ cartArr[i].src }" >
										<br>
										<span>${ cartArr[i].title }</span>
									</p>
								</td>
								<td>
									<button type="button" class="btn" onclick="jian(${ cartArr[i].id })">-</button>
									<input disabled type="number" name="" id="" value="${ cartArr[i].count }" class="count"/>
									<button type="button" class="btn" onclick="jia(${ cartArr[i].id })">+</button>
								</td>
								<td>
									<span>${ cartArr[i].price }元</span>
								</td>
								<td>
									${ cartArr[i].xiaoji }
								</td>
								<td>
									<button type="button" onclick="del(${ cartArr[i].id })">删除</button>
								</td>
								<td>
									${ cartArr[i].time }
								</td>								
							</tr>
					
						`
					sum = sum / 1 + cartArr[i].xiaoji / 1
				}
			
				tbody.innerHTML = str;
				document.getElementById("sum").innerHTML = sum;
			}
			
			function getLocalCartData() {
				cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
				return cartArr;
			}
			
			function getLocalGoodsListData() {
				arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
				return arr;
			}
			
			function jian(id) {
				console.log("id:", id);
				cartArr = getLocalCartData();
				cartArr.forEach(function (item, index) {
					if (item.id == id) {
						if (item.count > 1) {
							item.count--;
							item.xiaoji = (item.count * item.price).toFixed(2);
						}
					}
				})
				localStorage.cartArr = JSON.stringify(cartArr);
				render(cartArr);
			}
			

			function jia(id) {
				console.log(id);
				cartArr = getLocalCartData();
				cartArr.forEach(function (item, index) {
					if (item.id == id) {
						item.count++;
						item.xiaoji = (item.count * item.price).toFixed(2);
					}
				});
				localStorage.cartArr = JSON.stringify(cartArr);
				render(cartArr);
			}
			
			
			function del(id) {
			
				cartArr = getLocalCartData();
			
				cartArr = cartArr.filter(function (item, index) {
					return item.id != id
				})
				localStorage.cartArr = JSON.stringify(cartArr);
				render(getLocalCartData());
			}
			
			var quanxuan = document.querySelector(".quanxuan");
			quanxuan.onclick = function () {
				var danxuanList = document.querySelectorAll(".danxuan");
				for (let index = 0; index < danxuanList.length; index++) {
					danxuanList[index].checked = quanxuan.checked;
				}
			}
			
			
			var delChecked = document.getElementById("delChecked");
			delChecked.onclick = function(){
			
				cartArr = getLocalCartData();
				var danxuanList = document.querySelectorAll(".danxuan:checked");
				for (let i = 0; i < danxuanList.length; i++) {
					
					cartArr.forEach(function(item,index){
						if(item.id === danxuanList[i].getAttribute("data-id")){
							cartArr.splice(index,1)
						}
					})
					
				}
			
				localStorage.cartArr = JSON.stringify(cartArr);
				render(getLocalCartData());
			}			
		</script>
	</body>
</html>
